<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
     
       
    }
    /* 头部样式 */
    .header {
        height: 36px;
        background-color: black;
    }
    /* 头部居中样式 */
    .header .center {
        height: 36px;
        margin: 0 auto;
        width: 1090px;
        background-color: black;
        line-height: 36px;
    }
    .header .header_left {
        float: left;
        color: #cc9756;
    }
    .header .header_right {
        float: right;
    }
    .header .header_left::before {
        content: '';
        float: left;
        height: 15px;
        width: 15px;
        margin: 10px;
        background-image: url(http://yanxuan.nosdn.127.net/d132c2561f18f1149d566a60d05fd9b7.gif);
        background-size: 100% 100%;
    }
    .header .header_right ul li {
        float: left;
        color: #ffffff;
        margin-right: 10px;
        font-size: 0.5em;

    }
    /* 竖线 */
    .header .header_right .vertical::after {
        content: '';
        height: 10px;
        width: 1px;
        /* display: inline-block; */
        float: right;
        margin-top: 14px;
        background-color: rgb(161, 161, 161);
        margin-left: 10px;
    }
    .header .header_right ul li:last-child::after {
        display: none;
    }
    .header .header_right .phone::before {
        content: '';
        height: 12px;
     width: 8px;
        display: inline-block;
        background-image: url(../day03/images/phone.png);
        margin-top: 8px;
        background-size: 100% 100%;
        
    }
    .header .header_right .arrow::after {
        content: '';
        height: 12px;
        width: 12px;
        display: inline-block;
        background-image: url(../day03/images/箭头.png);
        margin-top: 10px;
        background-size: 100% 100%;
        margin-left: 5px;
        
    }
  
    /* 下拉 */
    .contenter .header .drop  {
        background-color: rgb(247, 247, 247);
         width: 82px;
         height: 126px;
         -webkit-box-shadow: 1px 1px 5px 0px #555555;
	    box-shadow: 1px 1px 5px 0px #555555;
       position: absolute;
       left: 0;
       display: none;
    }
 
    .contenter .header .arrow span:hover + .drop {
        display: block;
        
    }
  
        .contenter .header .drop li {
            color: black;
        margin-left: 15px;
         

         }
         /* 距离 */
         .contenter .drop{
      margin-left: 1312px;
         }
         /* 下分割线 */
         .contenter .drop .tag1 {
     
        border-bottom: 1px solid #b9b9b9;
            width: 50px;
         }
         .contenter .drop .tag2 {
       
        border-bottom: 1px solid #b9b9b9;
            width: 50px;
         }

         /* 标题 */
    .contenter .title { 
        margin: 0 auto;
        width: 1090px;
       
    }
    .contenter .title img {
        margin-top: 20px;
    }
   
    .contenter .title .title_right {
     float: right;
    }
    .contenter .title .title_right .search_black {
        float: left;
        margin-top: 20px;
        margin-right: 50px;
    }
    input[type='search'] {
        width:440px;
        height: 38px;
        border-top-left-radius: 50px;
	    border-bottom-left-radius: 50px;
        margin-right: 0;
        border: 1px solid #CC9756;
        background-color: #ffffff;
        
       
    }
    .contenter .title .title_right .buttonn {
    margin-top: 20px;
    }
    input[type='button'] {
        width: 140px;
        height: 40px;
        border-radius: 50px;
        border: 1px solid #CC9756;
        background-image: url(../day03/images/shop.png);
        background-color: #ffffff;
        background-repeat: no-repeat;
        background-position-x: 30px;
        background-position-y: 8px;
    }

    .contenter .title .title_right button {
     width: 90px;
     height: 38px;
     border: 1px solid #CC9756;
     background-color: #CC9756;
     border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
    margin-left: -5px;
    font-size: 14px;
    color: #ffffff;

    }


    /* 导航 */


    .contenter .navi { 
        margin: 0 auto;
        width: 1090px;
       
    }
    .contenter .navi ul {
        margin-top: 20px;
    }
    .contenter .navi ul li{
        font-size: 15px;
        font-weight: bolder;
        float: left;
        margin-left: 40px;
    }
    .contenter .navi ul li:hover {
        border-bottom: 3px solid #CC9756;
    }
    .contenter .navi ul .tag1::after {
        content: '';
        height: 10px;
        width: 1px;
        /* display: inline-block; */
        float: right;
        margin-top: 5px;
        background-color: rgb(161, 161, 161);
        margin-left: 10px;
    }
    .contenter .bigPic img {
        margin-top: 15px;
    }
    /* article */
    .contenter .article {
        width: 1380px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .contenter .article .navig {
        float: left;
    }
    .contenter .article .navig ul {
        border: 1px solid #e7e7e7;
        width: 110px;
    }
    .contenter .article ul li .nav_img {
        float: left;
    }
    .contenter .article ul li img {
        width: 35px;
    }
    .contenter .article ul li {
        width: 80px;
     margin: 0 auto;
     border-bottom: 1px solid #e7e7e7;
        font-size: 14px;
    }
    .contenter .article .aside_a {
        margin-left: 150px;
        width: 1150px;
      
    }
    .contenter .article .aside_a div .blod {
      font-size: 30px;
      font-weight: bolder;
      
    }
    /* 四格图片 */
    .contenter .article .aside_a .img_Pic figure {
        
         float: left;
         width: 270px;
      
    }
    .contenter .article .aside_a .img_Pic figure img {
        background-color: rgb(243, 243, 243);
    }
    .contenter .article .aside_a .img_Pic figure figcaption {
        margin-top: 20px;
        text-align: center;
    }
    .contenter .article .aside_a .img_Pic figure figcaption div {
        color: rgb(211, 5, 5);
    }
</style>
<body>
    <div class="contenter">
        <!-- 头部 -->
        <div class="header">
            <!-- 头部居中 -->
            <div class="center">
                <div class="header_left">
                    关于电话服务工作时间变更通知</div>
                <div class="header_right">
                    <ul>
                        <li class="vertical">登录/注册</li>
                        <li class="vertical">我的订单</li>
                        <li class="vertical">会员</li>
                        <li class="vertical">甄选家</li>
                        <li class="arrow ">
                         <span>企业采购</span>    
                         <ul class="drop">
                            <li>企业购</li>
                            <li class="tag1"></li>
                            <li>礼品卡</li>
                            <li class="tag1"></li>
                            <li>联系我们</li>
                            <li class="tag2"></li>
                        </ul>
                        </li>
                        <li class="vertical">客户服务</li>
                        <li class="phone vertical">
                            App
                        </li>
                    </ul>
                </div>
            </div>
        </div>
            
        <div class="title">
            <img src="../day03/images/title.png" alt="">
            <div class="title_right">
            <form action="">
                <div class="search_black">
                <input type="search">
                <button>搜索</button>
            </div>
          
                <input class="buttonn" type="button">
            

            </form>
        </div>
        </div>
        <div class="navi">
            <ul>
                <li>首页</li>
                <li>居家生活</li>
                <li>服装鞋包</li>
                <li>美食酒水</li>
                <li>个人清洁</li>
                <li>母婴亲子</li>
                <li>运动旅行</li>
                <li>数码家电</li>
                <li class="tag1">严选全球</li>
                <li>为你严选</li>
                <li>众筹</li>
            </ul>
        </div>
        <div class="bigPic">
            <img src="https://yanxuan.nosdn.127.net/0fae504f6958db87ee919c38bac02c9b.png?type=webp&imageView&quality=95&thumbnail=1920x420" alt="">
        </div>
        <div class="article">
            <div class="navig">
                <ul>
                    <li style="width: 110px; font-size: 18px; text-align: center;color: #BB3343;height: 38px; line-height: 38px;background-image: url(../day03/images/bang.jpg);">
                        - 热销榜 -
                    </li>
                        <div style="clear: both;"></div>
                    <li>
                        <div class="nav_img">
                            <img src="http://yanxuan.nosdn.127.net/d83d6cc58589e7b9540e57809920d961.png?quality=95&type=webp&imageView" alt="">
                        </div>
                        <div><div>全站</div> <div>热销榜</div></div>
                        </li>

                       <div style="clear: both;"></div>
                        <li>
                            <div class="nav_img">
                                <img src="http://yanxuan.nosdn.127.net/288d84fe691240d9f87271b293f39b67.png?quality=95&type=webp&imageView" alt="">
                            </div>
                            <div><div>居家</div> <div>生活榜</div></div>
                            </li>
                            <div style="clear: both;"></div>
                            <li>
                                <div class="nav_img">
                                    <img src="http://yanxuan.nosdn.127.net/2318b65e996e14bc0707880040dfabb0.png?quality=95&type=webp&imageView" alt="">
                                </div>
                                <div><div>服饰</div> <div>鞋包榜</div></div>
                                </li>
                               <div style="clear: both;"></div>
                               <li>
                                <div class="nav_img">
                                    <img src="http://yanxuan.nosdn.127.net/8ca4557361e2fff394a5a94d0b73f3c6.png?quality=95&type=webp&imageView" alt="">
                                </div>
                                <div><div>美食</div> <div>酒水榜</div></div>
                                </li>
                               <div style="clear: both;"></div>

                               <li>
                                <div class="nav_img">
                                    <img src="http://yanxuan.nosdn.127.net/270bc2465ac7eed90ada40c92166678b.png?quality=95&type=webp&imageView" alt="">
                                </div>
                                <div><div>数码</div> <div>家电榜</div></div>
                                </li>
                               <div style="clear: both;"></div>

                               <li>
                                <div class="nav_img">
                                    <img src="http://yanxuan.nosdn.127.net/4723267aef758a7d805bb7c1447fdc44.png?quality=95&type=webp&imageView" alt="">
                                </div>
                                <div><div>个护</div> <div>清洁榜</div></div>
                                </li>
                               <div style="clear: both;"></div>

                               <li>
                                <div class="nav_img">
                                    <img src="http://yanxuan.nosdn.127.net/eec3af53eb17a4b117043e18ae7c7418.png?quality=95&type=webp&imageView" alt="">
                                </div>
                                <div><div>运动</div> <div>旅行榜</div></div>
                                </li>
                               <div style="clear: both;"></div>

                               <li>
                                <div class="nav_img">
                                    <img src="http://yanxuan.nosdn.127.net/a94b2f7f7ada813ae9c93f84d3d60d6f.png?quality=95&type=webp&imageView" alt="">
                                </div>
                                <div><div>母婴</div> <div>亲子榜</div></div>
                                </li>
                               <div style="clear: both;"></div>
                               <li>
                                <div class="nav_img">
                                    <img src="http://yanxuan.nosdn.127.net/9cb33f543dddd54c7cc157d29650dbf4.png?quality=95&type=webp&imageView" alt="">
                                </div>
                                <div><div>全球</div> <div>特色榜</div></div>
                                </li>
                               <div style="clear: both;"></div>
                </ul>

              
            </div>
            <div class="aside_a">
                <div style="margin-bottom: 20px;"><span class="blod">新品首发</span>  <span style="margin-left: 30px;">为你寻觅事件好物</span><span style="float: right;">更多新品></span></div>
                <span style="clear: both;"></span>
                <div class="img_Pic">
                    <figure><img src="../day03/images/1.png" alt=""><figcaption>轻弹云朵男女居家拖鞋<div>￥14.9</div></figcaption></figure>
                    <figure><img src="../day03/images/2.png" alt=""><figcaption>新疆棉 女式长绒多色基础百搭T恤<div>￥53</div></figcaption></figure>
                    <figure><img src="../day03/images/3.png" alt=""><figcaption>凉感抑菌棉麻居家拖鞋2.0<div>￥35</div></figcaption></figure>
                    <figure><img src="../day03/images/4.png" alt=""><figcaption>女式多色双面针织T恤<div>￥53</div></figcaption></figure>
                </div>
            </div>
           
        </div>




    </div>
</body>
</html>